<!-- <template>
    <view></view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    onLoad() {
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped></style> -->

<!-- <template>
    <view></view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    onLoad() {
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped></style> -->

<template>
  <view class="container">
    <!-- 顶部轮播图 -->
    <swiper class="banner-swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="1000">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill" class="banner-image"></image>
        <view class="banner-text">
          <text class="banner-title">{{ item.title }}</text>
          <view class="banner-search">
            <text>即刻探索</text>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 三个分类图片 -->
    <view class="category-container">
      <view class="category-item" v-for="(item, index) in categoryList" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
        <text>{{ item.title }}</text>
      </view>
    </view>

    <!-- 产品展示区域 -->
    <view class="product-section">
      <text class="section-title">Miu Miu Gymnasium</text>
      
      <!-- 大图展示 -->
      <image class="feature-image" :src="featureImage" mode="aspectFill"></image>

      <!-- 产品列表 -->
      <view class="product-list">
        <view class="product-item" v-for="(item, index) in productList" :key="index">
          <image :src="item.image" mode="aspectFill"></image>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-price">¥ {{ item.price }}</text>
          </view>
        </view>
      </view>

      <!-- 更多按钮 -->
      <view class="more-btn">
        <text>探索更多</text>
      </view>

      <!-- 底部指示器 -->
      <view class="indicator">
        <view v-for="(item, index) in 5" :key="index" :class="['dot', index === currentIndex ? 'active' : '']"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      bannerList: [
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          title: 'Miu Miu Custom Studio©'
        },
		{
		  image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
		  title: 'Miu Miu Custom Studio©'
		}
      ],
      categoryList: [
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          title: 'Gymnasium'
        },
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          title: 'Custom Studio'
        },
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          title: '包袋'
        }
      ],
      featureImage: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
      productList: [
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          name: '圆领毛衣',
          price: '11,200'
        },
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          name: '府绸质感衬衫',
          price: '12,700'
        },
        {
          image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
          name: 'Gymnasium织物面料与绒面皮革芭蕾平底鞋',
          price: '7,850'
        }
      ]
    }
  }
}
</script>

<style>
.container {
  width: 100%;
}

.banner-swiper {
  width: 100%;
  height: 500rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.banner-title {
  font-size: 40rpx;
  margin-bottom: 30rpx;
}

.banner-search {
  padding: 20rpx 40rpx;
  border: 2rpx solid #fff;
}

.category-container {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.category-item {
  width: 30%;
  text-align: center;
}

.category-item image {
  width: 100%;
  height: 200rpx;
  margin-bottom: 10rpx;
}

.product-section {
  padding: 40rpx 20rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.feature-image {
  width: 100%;
  height: 600rpx;
  margin-bottom: 30rpx;
}

.product-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product-item {
  width: 32%;
  margin-bottom: 20rpx;
}

.product-item image {
  width: 100%;
  height: 200rpx;
  margin-bottom: 10rpx;
}

.product-info {
  text-align: center;
}

.product-name {
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #666;
}

.more-btn {
  text-align: center;
  padding: 20rpx;
  border: 2rpx solid #000;
  margin: 40rpx auto;
  width: 200rpx;
}

.indicator {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ddd;
  margin: 0 8rpx;
}

.dot.active {
  background-color: #000;
}
</style>
